{% extends "base.html" %}
{% load i18n %}
{% load url from future %}
{% load yummy_tags %}

{% block title %}{{ SITE_NAME }} | Главная{% endblock %}


{% block extra-header %}
<style>
#slider          { background: white url(http://css-tricks.com/examples/StartStopSlider/images/slider-bg.jpg); height: 227px; overflow: hidden;
                   position: relative; margin: 50px 0; }
#mover           { width: 2880px; position: relative; }
/* .slide           { padding: 40px 30px; width: 900px; float: left; position: relative; } */
.slide           { padding: 40px 30px; width: 1136px; float: left; position: relative; }
.slide h1        { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
                   color: #ac0000; }
.slide p         { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img       { position: absolute; top: 20px; left: 400px; }
#slider-stopper  { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
                   padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }
</style>
{% endblock extra-header %}



{% block carousel-block %}
{% comment %}
Вот что нужно на самом деле
http://css-tricks.com/startstop-slider/
{% endcomment %}

<div id="slider">

      <div id="mover">
    
        <div id="slide-1" class="slide">
        
          <h1>Garden Rack</h1>
          
          <p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
          
          <a href="#"><img src="http://css-tricks.com/examples/StartStopSlider/images/slide-1-image.png" alt="learn more" /></a>
          
        </div>
        
        <div class="slide">
        
          <h1>Tulip Bulbs</h1>
          
          <p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
          
          <a href="#"><img src="http://css-tricks.com/examples/StartStopSlider/images/slide-2-image.png" alt="learn more" /></a>
          
        </div>
        
        <div class="slide">
        
          <h1>Garden Gloves</h1>
          
          <p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
          
          <a href="#"><img src="http://css-tricks.com/examples/StartStopSlider/images/slide-3-image.png" alt="learn more" /></a>
          
        </div>
      
      </div>
    
</div>

{% comment %}
    <div id="myCarousel" class="newcarousel slide">
      {% for gallery in carousel %}
        {% for photo in gallery.get_photos %}
          <a  class="fancybox-thumb" rel="fancybox-thumb" href="{{ photo.image.url }}">
            <img src="{{ photo.image.url }}" alt="{{ gallery.title }}-{{ photo.title }}" style="height: 1px;"/>
            </a>
        {% endfor %}
      {% endfor %}
      {# {% include "topcarousel/index.html" %} #}
    </div> <!-- /.carousel -->
{% endcomment %}

{% endblock carousel-block %}


{% block recipes-block-content %}

{% comment %} 
Отображение рецепта в любимых рецептов:
1. Фото
2. Автор
3. Заглавие
4. Категория
Рецепты отфильтрованны по следующим признакам:
1. Рейтинг выше 3 (?)
2. Есть фотография
{% endcomment %}

{% yummy_recipe_recommendation 6 as recipes %}

{% if recipes %}
<hr style="border-bottom: dotted 2px #cccccc;">
<h2>Любимые рецепты</h2>

<div id="portfolio_container" class="portfolio_strict">
  {% for one in recipes %}
	<div class="portfolio_item cat_travel col-lg-4">
			<div class="portfolio_photo" style="background-image:url({{ one.get_top_photo }})">
	  		<a href="{{ one.get_absolute_url }}"><p>{{ one.title }}</p></a>
      </div>
      <div class="portfolio_description">
       <h3><a href="{{ one.get_absolute_url }}">{{ one.category }}</a></h3>
       <p>Автор: <a href="{{ one.owner.get_absolute_url }}">{{ one.owner.get_username }}</a></p>
      </div>
	</div>
  {% endfor %}
</div>
{% endif %}

{% endblock recipes-block-content %}



{% block dayrecipe-block-content %}
{% comment %}
Отображения рецептов по одному из категорий (горячее, десерт, супы) 
с самым высоким рейтингом и имеющим фотографию
Отображение:
1. Фото
2. Автор
3. Заглавие
4. Категория
Картинки для каждого из блюд должны быть кликабельны
{% endcomment %}

  {% if daymenus %}
    {% load yummy_tags %}
    {% yummy_day_menu %}
  {% endif %}

{% endblock dayrecipe-block-content %}